<template>
  <el-card id="ectu" style=" height: 610px"> </el-card>
</template>
<script>
export default {
  mounted() {
    var chartDom = document.getElementById("ectu");
    var myChart = this.$echarts.init(chartDom);
    var option;

    setTimeout(function () {
      option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["date", "s5", "s6", "s7", "s8", "s9", "s10","s11"],
            ["EDG", 14, 16, 22, 11, 18, 10, 40],
            ["FPX", 12, 14, 13, 12, 40, 10, 10],
            ["IG", 11, 23, 20, 45, 19, 23, 23],
            ["T1", 32, 33, 30, 33, 26, 33, 32],
            ["RNG", 23, 21, 24, 11, 11, 10, 10],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self",
            },
            label: {
              formatter: "{b}: {@2012} ({d}%)",
            },
            encode: {
              itemName: "date",
              value: "s5",
              tooltip: "s5",
            },
          },
        ],
      };
      myChart.on("updateAxisPointer", function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)",
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      });
      myChart.setOption(option);
    });
    option && myChart.setOption(option);
  },
};
</script>
<style>
</style>
